<?php echo $header; ?>
<style>.list tbody td{background:none;}</style>
<div id="content">
  <div class="box">
    <div class="heading">
      <h1><img src="view/image/customer.png" alt="" /> Thanh toán cho thành viên</h1>
    </div>
    <div class="content">
	<div class="overview" style="width:45%;">
        <div class="dashboard-heading">Tìm kiếm & Thành viên</div>
        <div class="dashboard-content" style="min-height:initial;padding:5px;font-weight:bold">
         <table class="list" style="margin-bottom:0">
          <tbody>
		   <thead>
				<tr>
				   <td class="left">Mã thành viên</td> 
				   <td class="left">Ngày bắt đầu</td>
				   <td class="left">Ngày kết thúc</td>
					<td class="left"></td>
				</tr>
			  </thead>
            <tr class="filter">
			  <td><input type="text" name="filter_madn" value="" size="25"/></td>
              <td><input type="text" name="filter_date_start" value="" size="25" class="date" /></td>
              <td><input type="text" name="filter_date_end" value="" size="25" class="date" /></td>
              <td align="right"><a onclick="filter();" class="button">Tìm</a></td>
			</tr> 
          </tbody>
        </table>
        </div>
      </div>
	  <div id="box-ajax"></div>

    </div>
  </div>
</div>
<script type="text/javascript"><!--
function filter() {
	var check = true;
	url = 'index.php?route=sale/transactions/getTransactionInfo&token=<?php echo $token; ?>';
	
	var filter_madn = $('input[name=\'filter_madn\']').attr('value');
	var filter_date_start = $('input[name=\'filter_date_start\']').attr('value');
	var filter_date_end = $('input[name=\'filter_date_end\']').attr('value');
	if(filter_madn == ''){
		$('input[name=\'filter_madn\']').css('background-color','#D62340');
		check = false;
	} else {$('input[name=\'filter_madn\']').css('background-color','#fff');}
	if(filter_date_start == ''){
		$('input[name=\'filter_date_start\']').css('background-color','#D62340');
		check = false;
	} else {$('input[name=\'filter_date_start\']').css('background-color','#fff');}

	if(filter_date_end == ''){
		$('input[name=\'filter_date_end\']').css('background-color','#D62340');
		check = false;
	} else {$('input[name=\'filter_date_end\']').css('background-color','#fff');}
	if(check == true){
		url += '&customer_id=' + encodeURIComponent(filter_madn);
		url += '&filter_date_start=' + encodeURIComponent(filter_date_start);
		url += '&filter_date_end=' + encodeURIComponent(filter_date_end);
		$.ajax({
			url: url,
			type: 'GET',
			dataType: 'html',
			success: function(html) {
				if(html){
					$('#box-ajax').html(html);
					$('#button-transaction').click(function(){
						activeTransaction();
					});
				}
			}
		});
	}
}
function activeTransaction() {
	url = 'index.php?route=sale/transactions/activeTransaction&token=<?php echo $token; ?>';
	var filter_madn = $('input[name=\'filter_madn\']').attr('value');
	var total = $('input[name=\'total\']').attr('value');
	var filter_date_start = $('input[name=\'filter_date_start\']').attr('value');
	var filter_date_end = $('input[name=\'filter_date_end\']').attr('value');
	var comment = $('textarea[name=\'comment\']').attr('value');
	url += '&customer_id=' + encodeURIComponent(filter_madn);
	url += '&total=' + encodeURIComponent(total);
	url += '&comment=' + encodeURIComponent(comment);
	url += '&filter_date_start=' + encodeURIComponent(filter_date_start);
	url += '&filter_date_end=' + encodeURIComponent(filter_date_end);
	location.href = url;
}

$('input[name=\'filter_madn\']').autocomplete({
	delay: 500,
	source: function(request, response) {
		$.ajax({
			url: 'index.php?route=sale/customer/autocompleteCustomer&token=<?php echo $token; ?>&filter_customer=' +  encodeURIComponent(request.term),
			dataType: 'json',
			success: function(json) {		
				response($.map(json, function(item) {
					return {
						value: item.customer_id,
						label: item.madn
					}
				}));
			}
		});
	}, 
	select: function(event, ui) {
		$('input[name=\'filter_madn\']').val(ui.item.label);
	},
	focus: function(event, ui) {
      return false;
   }
});
//--></script>
<script type="text/javascript"><!--
$(document).ready(function() {
	$('.date').datepicker({dateFormat: 'yy-mm-dd'});
});
//--></script>
<?php echo $footer; ?> 